<template>
  <div style="padding-top: 20px;">
    <Upload :before-upload="beforeUpload" action="api/article/bigUpload" >
      <Button  icon="ios-cloud-upload-outline">上传文件</Button>
    </Upload>

 </div>
</template>

<script>

import SparkMD5 from 'spark-md5'
export default {

  data () {
    return {
      id: JSON.parse(localStorage.getItem('id')),
      msg: 'Welcome to Your Vue.js App',
      arr: []

    }
  },

  computed: {

  },
  mounted () {

  },
  methods: {

    beforeUpload(a){
      function sliceFile (file) {
        const files = [];
        const chunkSize = 128*1024;
        for (let i = 0; i < file.size; i+=chunkSize) {
          const end = i + chunkSize >= file.size ? file.size : i + chunkSize;
          let currentFile = file.slice(i, (end > file.size ? file.size : end));
          console.log(currentFile)
          files.push(currentFile);
        }
        return files;
      }

      this.md5File(sliceFile(a)).then(res=>{
        console.log(res,2)
      })
    },
    md5File (files) {
      const spark = new SparkMD5.ArrayBuffer();
      let fileReader;
      for (var i = 0; i < files.length; i++) {
        fileReader = new FileReader();
        fileReader.readAsArrayBuffer(files[i]);
      }

      return new Promise((resolve) => {
        fileReader.onload = function(e) {
          spark.append(e.target.result);
          if (i == files.length) {
            resolve(spark.end());
          }
        }
      })
    },

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
